<template>
  <!-- 头部 -->
  <div class="index-wrap">
    <header>
      <!-- 搜索框 -->
      <van-search
        use-action-slot="true"
        v-model="value"
        shape="round"
        placeholder="请输入搜索关键词"
        :right-icon="require('../../assets/img/index-image/组 22@2x.png')"
      />
    </header>
    <!-- 头部下面的图标按钮 -->
    <div class="icon-btn">
      <van-grid :column-num="5" :border="false">
        <van-grid-item
          @click="todetail"
          v-for="item in iconlist"
          :key="item"
          :icon="item.img"
          :text="item.text"
        />
      </van-grid>
    </div>
    <!-- 分类框 -->
    <div class="classify">
      <ul>
        <li @click="todetail">
          <a href="javascript:;"
            ><img
              :src="require('../../assets/img/index-image/组 13@2x.png')"
              alt=""
          /></a>
        </li>
        <li @click="toheart">
          <a href="javascript:;"
            ><img
              :src="require('../../assets/img/index-image/组 13 拷贝@2x.png')"
              alt=""
          /></a>
        </li>
        <li @click="todetail">
          <a href="javascript:;"
            ><img
              :src="require('../../assets/img/index-image/组 13 拷贝 2@2x.png')"
              alt=""
          /></a>
        </li>
        <li @click="topour">
          <a href="javascript:;"
            ><img
              :src="require('../../assets/img/index-image/组 13 拷贝 3@2x.png')"
              alt=""
          /></a>
        </li>
      </ul>
    </div>
    <!-- 中间标题 -->
    <div class="theam-a">
      <h2>咨询·解惑</h2>
      <span>更多<van-icon name="arrow" /></span>
    </div>
    <!-- 咨询疑惑的内容部分 -->
    <van-tabs v-model="active" class="consult-wrap" animated>
      <van-tab title="恋爱情感">
        <ul>
          <li
            v-for="item of consultlist.one"
            :key="item.img"
            @click="handleclick(item.id)"
          >
            <div class="img-wrap">
              <img :src="item.img" alt="" />
            </div>
            <div class="info-wrap">
              <p>
                {{ item.name }}
                <img
                  :src="require('../../assets/img/index-image/组 25@2x.png')"
                  alt=""
                />
              </p>
              <p class="p-z">
                <span v-for="(val, index) in item.type" :key="index">{{
                  val
                }}</span>
                <!-- <span>人际关系</span>
                <span>情绪管理</span> -->
              </p>
              <p class="p-m">
                <span>咨询次数{{ item.time }}</span
                ><span>好评率{{ item.evaluate }}</span>
              </p>
              <p>
                <b>￥{{ item.price }}</b
                ><span>起</span>
              </p>
            </div>
            <div class="icon-wrap">
              <img
                :src="
                  require('../../assets/img/index-image/矢量智能对象@2x.png')
                "
                alt=""
              />
            </div>
          </li>
        </ul>
      </van-tab>
      <van-tab title="婚姻家庭">
        <ul>
          <li v-for="item of consultlist.one" :key="item.img">
            <div class="img-wrap">
              <img :src="item.img" alt="" />
            </div>
            <div class="info-wrap">
              <p>
                {{ item.name }}
                <img
                  :src="require('../../assets/img/index-image/组 25@2x.png')"
                  alt=""
                />
              </p>
              <p class="p-z">
                <span v-for="(val, index) in item.type" :key="index">{{
                  val
                }}</span>
                <!-- <span>人际关系</span>
                <span>情绪管理</span> -->
              </p>
              <br />
              <p class="p-m">
                <span>咨询次数{{ item.time }}</span
                ><span>好评率{{ item.evaluate }}</span>
              </p>
              <p>
                <b>￥{{ item.price }}</b
                ><span>起</span>
              </p>
            </div>
            <div class="icon-wrap">
              <img
                :src="
                  require('../../assets/img/index-image/矢量智能对象@2x.png')
                "
                alt=""
              />
            </div>
          </li>
        </ul>
      </van-tab>
      <van-tab title="亲子教育">
        <ul>
          <li v-for="item of consultlist.one" :key="item.img">
            <div class="img-wrap">
              <img :src="item.img" alt="" />
            </div>
            <div class="info-wrap">
              <p>
                {{ item.name }}
                <img
                  :src="require('../../assets/img/index-image/组 25@2x.png')"
                  alt=""
                />
              </p>
              <p class="p-z">
                <span v-for="(val, index) in item.type" :key="index">{{
                  val
                }}</span>
                <!-- <span>人际关系</span>
                <span>情绪管理</span> -->
              </p>
              <br />
              <p class="p-m">
                <span>咨询次数{{ item.time }}</span
                ><span>好评率{{ item.evaluate }}</span>
              </p>
              <p>
                <b>￥{{ item.price }}</b
                ><span>起</span>
              </p>
            </div>
            <div class="icon-wrap">
              <img
                :src="
                  require('../../assets/img/index-image/矢量智能对象@2x.png')
                "
                alt=""
              />
            </div>
          </li>
        </ul>
      </van-tab>
      <van-tab title="人际社交">
        <ul>
          <li v-for="item of consultlist.one" :key="item.img">
            <div class="img-wrap">
              <img :src="item.img" alt="" />
            </div>
            <div class="info-wrap">
              <p>
                {{ item.name }}
                <img
                  :src="require('../../assets/img/index-image/组 25@2x.png')"
                  alt=""
                />
              </p>
              <p class="p-z">
                <span v-for="(val, index) in item.type" :key="index">{{
                  val
                }}</span>
                <!-- <span>人际关系</span>
                <span>情绪管理</span> -->
              </p>
              <br />
              <p class="p-m">
                <span>咨询次数{{ item.time }}</span
                ><span>好评率{{ item.evaluate }}</span>
              </p>
              <p>
                <b>￥{{ item.price }}</b
                ><span>起</span>
              </p>
            </div>
            <div class="icon-wrap">
              <img
                :src="
                  require('../../assets/img/index-image/矢量智能对象@2x.png')
                "
                alt=""
              />
            </div>
          </li>
        </ul>
      </van-tab>
      <van-tab title="职场发展">
        <ul>
          <li v-for="item of consultlist.one" :key="item.img">
            <div class="img-wrap">
              <img :src="item.img" alt="" />
            </div>
            <div class="info-wrap">
              <p>
                {{ item.name }}
                <img
                  :src="require('../../assets/img/index-image/组 25@2x.png')"
                  alt=""
                />
              </p>
              <p class="p-z">
                <span v-for="(val, index) in item.type" :key="index">{{
                  val
                }}</span>
                <!-- <span>人际关系</span>
                <span>情绪管理</span> -->
              </p>
              <br />
              <p class="p-m">
                <span>咨询次数{{ item.time }}</span
                ><span>好评率{{ item.evaluate }}</span>
              </p>
              <p>
                <b>￥{{ item.price }}</b
                ><span>起</span>
              </p>
            </div>
            <div class="icon-wrap">
              <img
                :src="
                  require('../../assets/img/index-image/矢量智能对象@2x.png')
                "
                alt=""
              />
            </div>
          </li>
        </ul>
      </van-tab>
    </van-tabs>
    <!-- 学习成长的标题部分 -->
    <div class="theam-a">
      <h2>学习·成长</h2>
      <span>更多<van-icon name="arrow" /></span>
    </div>
    <!-- 学习成长的内容部分 -->
    <div class="study-wrap">
      <ul>
        <li v-for="item in consultlist.two" :key="item">
          <div class="img-wrap">
            <img
              :src="require('../../assets/img/index-image/组 21@2x(2).png')"
              alt=""
            />
          </div>
          <div class="info-wrap">
            <p>{{ item.title }}</p>
            <p>
              <span>
                <b>{{ item.price }}</b
                >壹贝
              </span>
              <span>{{ item.good }}人气</span>
            </p>
          </div>
        </li>
      </ul>
    </div>
    <!-- 倾诉排解的内容部分 -->
    <div class="theam-a">
      <h2>倾诉·排解</h2>
      <span @click="topour">更多<van-icon name="arrow" /></span>
    </div>
    <!-- 倾诉排解的内容部分 -->
    <van-tabs v-model="active" class="resolve" animated>
      <van-tab title="恋爱情感">
        <ul>
          <li
            v-for="item in consultlist.there"
            :key="item.id"
            @click="handleclick(item.id)"
          >
            <div class="img-wrap">
              <img :src="item.img" alt="" />
            </div>
            <div class="info-wrap">
              <p>
                {{ item.name }}
                <img
                  :src="require('../../assets/img/index-image/组 25@2x.png')"
                  alt=""
                />
              </p>
              <p>
                <span v-for="val in item.type" :key="val">{{ val }}</span>
              </p>
              <p class="p-m">
                <span>{{ item.time }}人向她倾诉</span>
                <span>{{ item.evaluate }}接通率</span>
              </p>
              <p>
                <b>0</b><span>/次</span> <span>原价{{ item.price }}元</span>
                <span>立减￥50.00</span>
              </p>
            </div>
            <div class="icon-wrap">
              <img
                :src="require('../../assets/img/index-image/组 22@2x.png')"
                alt=""
              />
            </div>
          </li>
        </ul>
      </van-tab>
      <van-tab title="婚姻家庭">
        <ul>
          <li>
            <div class="img-wrap">
              <img
                :src="require('../../assets/img/index-image/组 21@2x(3).png')"
                alt=""
              />
            </div>
            <div class="info-wrap">
              <p>
                周秀华
                <img
                  :src="require('../../assets/img/index-image/组 25@2x.png')"
                  alt=""
                />
              </p>
              <p>
                <span>自我成长</span>
                <span>人际关系</span>
              </p>
              <p><span>32人向她倾诉</span> <span>100%接通率</span></p>
              <p>
                <b>0</b><span>/次</span> <span>原价50元</span>
                <span>立减￥50.00</span>
              </p>
            </div>
            <div class="icon-wrap">
              <img
                :src="require('../../assets/img/index-image/组 22@2x.png')"
                alt=""
              />
            </div>
          </li>
        </ul>
      </van-tab>
      <van-tab title="亲子教育">
        <ul>
          <li>
            <div class="img-wrap">
              <img
                :src="require('../../assets/img/index-image/组 21@2x(3).png')"
                alt=""
              />
            </div>
            <div class="info-wrap">
              <p>
                周秀华
                <img
                  :src="require('../../assets/img/index-image/组 25@2x.png')"
                  alt=""
                />
              </p>
              <p>
                <span>自我成长</span>
                <span>人际关系</span>
              </p>
              <p><span>32人向她倾诉</span> <span>100%接通率</span></p>
              <p>
                <b>0</b><span>/次</span> <span>原价50元</span>
                <span>立减￥50.00</span>
              </p>
            </div>
            <div class="icon-wrap">
              <img
                :src="require('../../assets/img/index-image/组 22@2x.png')"
                alt=""
              />
            </div>
          </li>
        </ul>
      </van-tab>
      <van-tab title="人际社交">
        <ul>
          <li>
            <div class="img-wrap">
              <img
                :src="require('../../assets/img/index-image/组 21@2x(3).png')"
                alt=""
              />
            </div>
            <div class="info-wrap">
              <p>
                周秀华
                <img
                  :src="require('../../assets/img/index-image/组 25@2x.png')"
                  alt=""
                />
              </p>
              <p>
                <span>自我成长</span>
                <span>人际关系</span>
              </p>
              <p><span>32人向她倾诉</span> <span>100%接通率</span></p>
              <p>
                <b>0</b><span>/次</span> <span>原价50元</span>
                <span>立减￥50.00</span>
              </p>
            </div>
            <div class="icon-wrap">
              <img
                :src="require('../../assets/img/index-image/组 22@2x.png')"
                alt=""
              />
            </div>
          </li>
        </ul>
      </van-tab>
      <van-tab title="职场发展">
        <ul>
          <li>
            <div class="img-wrap">
              <img
                :src="require('../../assets/img/index-image/组 21@2x(3).png')"
                alt=""
              />
            </div>
            <div class="info-wrap">
              <p>
                周秀华
                <img
                  :src="require('../../assets/img/index-image/组 25@2x.png')"
                  alt=""
                />
              </p>
              <p>
                <span>自我成长</span>
                <span>人际关系</span>
              </p>
              <p><span>32人向她倾诉</span> <span>100%接通率</span></p>
              <p>
                <b>0</b><span>/次</span> <span>原价50元</span>
                <span>立减￥50.00</span>
              </p>
            </div>
            <div class="icon-wrap">
              <img
                :src="require('../../assets/img/index-image/组 22@2x.png')"
                alt=""
              />
            </div>
          </li>
        </ul>
      </van-tab>
    </van-tabs>
    <!-- 测试分析的内容部分 -->
    <div class="theam-a">
      <h2>测试·分析</h2>
      <span @click="toheart">更多<van-icon name="arrow" /></span>
    </div>
    <!-- 测试分析的内容部分 -->
    <div class="analysis-wrap">
      <img
        :src="require('../../assets/img/index-image/矩形 18@2x.png')"
        alt=""
      />
      <ul>
        <li v-for="item in consultlist.four" :key="item">
          <img :src="item.img" alt="" />
          <div class="info-wrap">
            <div class="info">
              <p>{{ item.title }}</p>
              <span>{{ item.rq }}人气</span>
              <span>{{ item.yc }}人已测</span>
            </div>
            <div class="test">去测试</div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 解忧问答的内容部分 -->
    <div class="theam-a">
      <h2>解忧·问答</h2>
      <span @click="toquestion">更多<van-icon name="arrow" /></span>
    </div>
    <!-- 解忧问答的内容部分 -->
    <div class="question">
      <li v-for="item in morelist.value" :key="item">
        <div class="user-wrap">
          <img :src="item.img" alt="" />
          <div class="user-info">
            <b>{{ item.name }}</b>
            <p>来自Android客户端</p>
          </div>
        </div>
        <h2>壹点灵服务咨询</h2>
        <div class="content-m">
          {{ item.info }}
        </div>
        <div class="content-b">
          <p>
            <span>王永兴：</span>
            <span>你好，我是壹点灵的服务工作者王永兴1234</span>
          </p>
        </div>
        <div class="content-i">
          <b>#{{ item.title }}</b>
          <van-icon name="chat-o" /><strong>{{ item.msg }}</strong>
          <van-icon name="manager-o" /><strong>{{ item.good }}</strong>
        </div>
      </li>
      <van-button type="primary" size="large" @click="getmore" :disabled="false"
        >点击更多</van-button
      >
    </div>

    <!-- 助眠冥想的内容部分 -->
    <div class="theam-a">
      <h2>助眠·冥想</h2>
      <span>更多<van-icon name="arrow" /></span>
    </div>
    <!-- 助眠冥想的内容部分 -->
    <div class="pic">
      <ul>
        <li v-for="item in picData" :key="item"><img :src="item" alt="" /></li>
      </ul>
    </div>
    <div class="sleep-wrap">
      <ul>
        <li>
          <a href="http://10.31.163.10:8080/#/home/index"
            ><img
              :src="require('../../assets/img/index-image/组 25@2x(3).png')"
              alt=""
          /></a>
        </li>
        <li>
          <a href="http://10.31.163.10:8080/#/home/index"
            ><img
              :src="require('../../assets/img/index-image/组 26@2x(1).png')"
              alt=""
          /></a>
        </li>
        <li>
          <a href="http://10.31.163.10:8080/#/home/index"
            ><img
              :src="require('../../assets/img/index-image/组 27@2x(1).png')"
              alt=""
          /></a>
        </li>
        <li>
          <a href="http://10.31.163.10:8080/#/home/index"
            ><img
              :src="require('../../assets/img/index-image/组 28@2x(1).png')"
              alt=""
          /></a>
        </li>
      </ul>
    </div>
    <!-- 心灵电台的内容部分 -->
    <div class="theam-a">
      <h2>心灵·电台</h2>
      <span @click="tostation">更多<van-icon name="arrow" /></span>
    </div>
    <!-- 心灵电台的内容部分 -->
    <div class="radio-wrap">
      <img
        :src="require('../../assets/img/index-image/图层 12@2x.png')"
        alt=""
      />
      <ul>
        <li v-for="item in consultlist.six" :key="item">
          <div class="info-wrap">
            <img
              :src="
                require('../../assets/img/index-image/矢量智能对象@2x(4).png')
              "
              alt=""
            />
            <span>{{ item.title }}</span>
          </div>
          <span>{{ item.dyl }}<van-icon name="service-o" /></span>
        </li>
      </ul>
    </div>
    <!-- 文章阅读的内容部分 -->
    <div class="theam-a">
      <h2>文章·阅读</h2>
      <span @click="toartical">更多<van-icon name="arrow" /></span>
    </div>
    <!-- 文章阅读的内容部分 -->
    <div class="artcal-wrap">
      <ul>
        <li v-for="item in consultlist.seven" :key="item">
          <div class="info-wrap">
            <div class="info">
              <b>{{ item.title }}</b>
              <p>
                {{ item.info }}
              </p>
            </div>
            <img :src="item.img" alt="" />
          </div>
          <div class="artical-m">
            <div class="m-l">
              <img
                :src="
                  require('../../assets/img/index-image/矢量智能对象@2x(5).png')
                "
                alt=""
              />
              <span>{{ item.name }}</span>
            </div>
            <div class="m-r">
              <span>{{ item.sc }}点赞</span>
              <span>{{ item.yd }}浏览</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="footer-m">
      <img
        :src="require('../../assets/img/index-image/组 25@2x(5).png')"
        alt=""
      />
    </div>
  </div>
</template>

<script>
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { computed, onMounted, reactive, ref } from "vue";
export default {
  setup() {
    const route = useRouter(); //页面跳转引入的路由
    const handleclick = (id) => route.push("/consultdet/" + id); //咨询详情页面跳转
    const active = ref(2); //咨询疑惑部分的active
    const value = ref(""); //搜索框
    //助眠部分图片渲染
    const picData = reactive([
      require("../../assets/img/index-image/组 25@2x(2).png"),
      require("../../assets/img/index-image/组 26@2x.png"),
      require("../../assets/img/index-image/组 27@2x.png"),
      require("../../assets/img/index-image/组 28@2x.png"),
    ]);
    //头部下面数据渲染
    const iconlist = reactive([
      {
        img: require("../../assets/img/index-image/组 21@2x.png"),
        text: "心理健康",
      },
      {
        img: require("../../assets/img/index-image/组 10@2x.png"),
        text: "婚姻家庭",
      },
      {
        img: require("../../assets/img/index-image/组 9@2x.png"),
        text: "亲子教育",
      },
      {
        img: require("../../assets/img/index-image/组 3@2x.png"),
        text: "情绪压力",
      },
      {
        img: require("../../assets/img/index-image/组 4@2x.png"),
        text: "人际关系",
      },
      {
        img: require("../../assets/img/index-image/组 5@2x.png"),
        text: "职业发展",
      },
      {
        img: require("../../assets/img/index-image/组 6@2x.png"),
        text: "个人成长",
      },
      {
        img: require("../../assets/img/index-image/组 7@2x.png"),
        text: "恋爱情感",
      },
      {
        img: require("../../assets/img/index-image/组 8@2x.png"),
        text: "法律咨询",
      },
      {
        img: require("../../assets/img/index-image/组 11@2x.png"),
        text: "全部",
      },
    ]);
    const store = useStore();
    const consultdata = () => store.dispatch("consultdata");
    const consultlist = reactive(computed(() => store.state.Home.consultlist));

    onMounted(() => {
      consultdata();
      // 点击加载更多
      setTimeout(() => {
        morelist.value = consultlist.value.five.slice(0, 5);
      }, 500);
    });
    // 去倾诉排解详情页面
    const topour = () => route.push("/pour");
    // 跳转去课程详情页面
    const todetail = () => route.push("/detail");
    // 心理测试详情页
    const toheart = () => route.push("/heart");
    // 跳转心灵电台页面
    const tostation = () => route.push("/ststion");
    // 跳转文章阅读页面
    const toartical = () => route.push("/article");
    // 跳转问答页面
    const toquestion = () => route.push("/home/question");
    // 点击加载更多
    const morelist = reactive([]);
    const disabled = ref(false);
    const getmore = () => {
      morelist.value = consultlist.value.five;
      disabled.value = true;
    };
    return {
      handleclick,
      active,
      value,
      picData,
      iconlist,
      consultlist,
      consultdata,
      route,
      topour,
      todetail,
      toheart,
      tostation,
      toartical,
      toquestion,
      getmore,
      morelist,
      disabled,
    };
  },
};
</script>
<style lang="less" scoped>
// .index-wrap {
//   width: 100%;
//   height: 3000px;
// }
// 头部样式
header {
  width: 100%;
  height: 251px;
  background: url("../../assets/img/index-image/图层 17@2x.png");
  background-size: 100% 100%;
  // margin-bottom: -20px;
  position: relative;
  // 头部搜索框样式
  .van-search {
    background: #5bc7f7;
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0;
    z-index: 10;
  }
}
// 头部下面的图标按钮样式
.van-hairline--top {
  width: 100%;
  height: 131.5px;
}

// 分类框样式
.classify {
  width: calc(100% - 20px);
  height: 85px;
  padding: 0 10px 0 10px;
  ul {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-around;
    li {
      width: 85px;
      height: 85px;
      display: flex;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

// 小标题
.theam-a {
  h2 {
    font-size: 22px;
    position: relative;
    text-indent: 10px;
    display: inline-block;
  }
  h2::after {
    content: "";
    width: 98px;
    height: 10px;
    background: linear-gradient(#009bf1, #5bc7f7);
    position: absolute;
    left: 10px;
    bottom: 0;
    z-index: -1;
  }
  span {
    width: 54px;
    height: 22px;
    border: 1px solid #e4e4e4;
    border-radius: 11px;
    font-size: 13px;
    position: absolute;
    left: 307px;
    margin-top: 22px;
    text-align: center;
    line-height: 22px;
  }
}
// tab切换样式
/deep/.van-tabs__wrap {
  padding: 0 6px;
}
/deep/.van-tab--active {
  font-weight: 900;
  font-size: 16px;
}
/deep/.van-tabs__line {
  background: #1ca0f2;
}
// 咨询解惑部分内容样式
.consult-wrap,
.resolve {
  ul {
    box-sizing: border-box;
    padding: 10px;
    li {
      width: 100%;
      min-height: 96px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #efefef;
      // 图片
      .img-wrap {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      // 文字内容
      .info-wrap {
        width: 230px;
        height: 96px;
        p {
          margin: 0;
        }
        p:first-child {
          font-size: 15px;
          font-weight: 900;
          font-family: PingFang-SC-Bold;
          img {
            width: 13.5px;
            height: 13.5px;
          }
        }
        p:nth-child(2) {
          width: 100%;
          height: 16px;
          font-size: 10px;
          span {
            height: 14px;
            background: #f7f7f7;
            padding-right: 10px;
            text-align: center;
            float: left;
          }
        }
        .p-m {
          font-size: 10px;
          span {
            font-size: 9px;
            // padding-left: 15px;
            margin-right: 15px;
            float: none;
          }
        }
        p:last-child {
          b {
            font-size: 20px;
            color: #fd4030;
          }
          span {
            font-size: 10px;
            color: #a5a5a5;
          }
        }
      }
      .icon-wrap {
        width: 45px;
        height: 45px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
//学习成长内容的样式
.study-wrap {
  box-sizing: border-box;
  padding: 10px;
  ul {
    width: 100%;
    li {
      width: 100%;
      height: 100%;
      border: 1px solid #f3f3f3;
      border-radius: 10px;
      box-shadow: 3pt 3pt 5px rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: center;
      //左边图片
      .img-wrap {
        width: 125px;
        height: 71px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .info-wrap {
        width: 225px;
        height: 71px;
        p {
          font-size: 15px;
          margin: 5px;
        }
        span {
          font-size: 10px;
          color: #fd4030;
          b {
            font-size: 16px;
            font-weight: 900;
          }
        }
        span:last-child {
          float: right;
          color: #000;
        }
      }
    }
  }
}
//倾诉排解内容
.resolve {
  ul {
    li {
      .info-wrap {
        .p-z {
          display: block;
          height: 16px;
          background: red;
        }
        p:nth-child(4) {
          b {
            font-size: 16px;
          }
          span {
            font-size: 14px;
          }
          span:nth-child(3) {
            text-decoration: line-through;
          }
          span:last-child {
            width: 63px;
            height: 14px;
            border: 1px solid #fec3bd;
            border-radius: 7px;
            font-size: 12px;
            color: #fec3bd;
            margin-left: 50px;
          }
        }
      }
    }
  }
}
//测试分析内容样式
.analysis-wrap {
  box-sizing: border-box;
  padding: 10px;
  img {
    width: 100%;
    height: 150px;
    border-radius: 10px;
  }
  ul {
    li {
      display: flex;
      width: 100%;
      height: 78.5px;
      margin-bottom: 10px;
      img {
        width: 67px;
        height: 50px;
      }
      .info-wrap {
        margin-left: 10px;
        width: calc(100% - 67px);
        border-bottom: 1px solid #efefef;
        display: flex;
        justify-content: space-between;
        p {
          font-size: 15px;
          font-weight: 900;
          margin: 0;
        }
        span {
          font-size: 10px;
          color: #111520;
        }
      }
      .test {
        width: 55px;
        height: 22px;
        background: #ffdd33;
        font-size: 14px;
        border-radius: 11px;
        text-align: center;
        font-weight: 900;
        line-height: 22px;
        margin-top: 15px;
      }
    }
  }
}
//解忧问答页面样式
.question {
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  li {
    box-sizing: border-box;
    list-style: none;
    width: 100%;
    min-height: 282px;
    border: 1px solid #efefef;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;

    .user-wrap {
      display: flex;
      height: 40px;
      align-items: center;
      img {
        width: 33px;
        height: 33px;
        margin-right: 15px;
      }
      b {
        font-size: 12px;
      }
      p {
        font-size: 12px;
        color: #a8a8a8;
        margin: 0;
      }
    }
    h2 {
      font-size: 17px;
      font-weight: 900;
      color: #231e22;
    }
    .content-m {
      width: 100%;
      height: 58px;
      font-size: 14px;
      color: #575757;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
    .content-b {
      // box-sizing: border-box;
      // padding: 10px;
      width: 100%;
      height: 70px;
      font-size: 14px;
      margin-top: 10px;

      p {
        margin: 0;
        width: 100%;
        height: 100%;
        background: #efefef;
        border-radius: 10px;
        display: flex;
        align-items: center;
        text-indent: 10px;

        span:first-child {
          font-weight: 900;
          color: #3aaaf3;
        }
        span:last-child {
          width: 265px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
    b {
      width: 106px;
      height: 21px;
      font-size: 14px;
      background: #efefef;
    }
    .van-icon-chat-o {
      margin-left: 130px;
      font-size: 16px;
    }
    .van-icon-manager-o {
      margin-left: 15px;
      font-size: 16px;
    }
    strong {
      font-size: 14px;
      font-weight: 500;
    }
  }
}

// 助眠冥想内容样式
.pic {
  width: 100%;
  box-sizing: border-box;
  ul {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    li {
      width: 175px;
      height: 90px;
      padding: 1px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.sleep-wrap {
  width: calc(100% - 20px);
  height: 85px;
  padding: 0 10px 0 10px;
  ul {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-around;
    li {
      width: 85px;
      height: 85px;
      display: flex;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
// 心灵电台内容样式
.radio-wrap {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  img {
    width: 100%;
  }
  ul {
    li {
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .info-wrap {
        display: flex;
        align-items: center;
        img {
          width: 22px;
          height: 22px;
        }
        span {
          font-size: 14px;
          line-height: 28px;
        }
      }

      span:last-child {
        float: right;
        font-size: 12px;
      }
    }
  }
}
//文章阅读部分
.artcal-wrap {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  li {
    .info-wrap {
      display: flex;
      justify-content: space-between;
      b {
        width: 220px;
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
      p {
        width: 228px;
        font-size: 12px;
        margin: 3px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
    img {
      width: 120px;
      height: 75px;
    }
    .artical-m {
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: space-between;
      line-height: 40px;
      .m-l {
        font-size: 12px;
        img {
          width: 12px;
          height: 12px;
        }
        span {
          font-weight: 900;
        }
      }
      .m-r {
        font-size: 12px;
      }
    }
  }
}
// 页面最后面部分
.footer-m {
  width: 100%;
  img {
    width: 100%;
  }
}
</style>
